import React, {Component} from 'react';
import '../assets/stylus/no_access.styl';
import tipLogo from '../assets/img/img_no_access.svg';
import {currentCirle, Circle} from '../showText';
import PropTypes from 'prop-types';


class NoAccess extends Component{
    constructor (props) {
        super(props);
        this.props = props;
        this.state = {
            time: 10
        };
    }

    static contextTypes = {
        router: PropTypes.object.isRequired
    }

    componentDidMount () {
        this.countTimer();
        this.init();
    }

    init () {

        window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

        let canvas = document.getElementById('canvas');
        let ctx = canvas.getContext('2d');
        let w = canvas.width = canvas.offsetWidth;
        let h = canvas.height = canvas.offsetHeight;
        let circles = [];
        let current_circle = new currentCirle(0, 0)

        let draw = function () {
            ctx.clearRect(0, 0, w, h);
            for (let i = 0; i < circles.length; i++) {
                circles[i].move(w, h);
                circles[i].drawCircle(ctx);
                for (let j = i + 1; j < circles.length; j++) {
                    circles[i].drawLine(ctx, circles[j])
                }
            }
            if (current_circle.x) {
                current_circle.drawCircle(ctx);
                for (var k = 1; k < circles.length; k++) {
                    current_circle.drawLine(ctx, circles[k])
                }
            }
            requestAnimationFrame(draw)
        }

        let init = function (num) {
            for (var i = 0; i < num; i++) {
                circles.push(new Circle(Math.random() * w, Math.random() * h));
            }
            draw();
        }
        window.addEventListener('load', init(100));
        window.onmousemove = function (e) {
            e = e || window.event;
            current_circle.x = e.clientX;
            current_circle.y = e.clientY;
        }
        window.onmouseout = function () {
            current_circle.x = null;
            current_circle.y = null;

        };
    }

    countTimer () {
        this.loopEvent = setInterval(() => {
            if (this.state.time <= 1) {
                clearInterval(this.loopEvent);
                this.props.history.push('/login');
            }
            this.setState({
                time: this.state.time - 1
            });
        }, 1000, this);
    }

    goBack () {
        clearInterval(this.loopEvent);
        this.context.router.history.push('/login');
    }

    render () {
        const InfoDom = (
            <div className="infoWrap">
                <div className="access-box">
                    <div className="access-logo"><img src={tipLogo} /></div>
                    <div className="access-context">您暂时没有访问权限！<span>{this.state.time}</span>s 后自动返回登录页面。</div>
                    <div className="access-btn" onClick={this.goBack.bind(this)}>返回首页</div>
                </div>
                <canvas className="login-bg" id="canvas"></canvas>
            </div>
        );
        return InfoDom;
    }
}

export default NoAccess;